<template>
	<view class="h100 flex-col">
		<my-status-bar />
		<view class="p-x-10 p-t-10" style="background: #fff">
			<view class="flex">
				<uni-data-select v-model="ALERT_TOP_TYPE" :localdata="localdata0" placeholder="请选择告警类型" class="m-r-5" />
				<uni-data-select v-model="ALERT_TYPE" :localdata="localdata1" placeholder="请选择二级类型" />
			</view>
			<view class="flex m-t-5">
				<uni-data-select v-model="ALERT_TOP_REGION" :localdata="localdata3" placeholder="请选择告警区域"
					class="m-r-5" />
				<uni-data-select v-model="ALERT_LEVEL" :localdata="localdata2" placeholder="请选择等级" />
			</view>
			<up-tabs :list="[{ name: '待处理' }, { name: '处理中' }, { name: '已处理' }]" :current="current"
				@click="({ index }) => {current = index; $store.user.current = index}" />
		</view>

		<view class="f1 h0 p-y-10">
			<my-scroll class="h100" @scrolltolower="scrolltolower" backTop>
				<template v-for="(item) in listData" :key="item.ids">
					<view class="item" @tap.stop="detailFn(item)">
						<up-text :text="item.告警信息" :lines="1" class="item-p" size="16" color="#333333" />
						<view class="flex m-t-4">
							<view class="f1 w0">
								<template v-for="(item2) in list" :key="item2.title">
									<view class="flex item-p">
										<view class="flex s-center">
											<image :src="getImgUrl(item2.img)" mode="widthFix"
												style="width: 30rpx; height: 32rpx" class="m-r-5" />
											<up-text :text="`${item2.title}：`" color="#525866" size="14" />
										</view>
										<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
									</view>
								</template>
							</view>
							<view class="flex-col s-center m-around">
								<up-tag :text="item.告警等级" plain shape="circle" size="mini" />
								<view @tap.stop="detailFn(item)" v-if="current == 0">
									<up-button type="primary" size='small' text="处理"
										color="linear-gradient(285deg, #3F7EFC 4%, #59A6FB 89%)" />
								</view>
								<view @tap.stop="operationFn(item)" v-if="current == 0">
									<up-button type="info" size='small' text="转隐患"
										color="linear-gradient(285deg, #24C68E 4%, #27DC9C 89%)" />
								</view>
							</view>
						</view>
					</view>
				</template>
			</my-scroll>
		</view>
	</view>
</template>

<script setup>
	import {
		getApiFabric
	} from '@/api/customApi';

	const current = ref(uni.$store.user.current),
		list = computed(() => {
			let data = [{
					title: '告警类型',
					img: 'msg/lx.png',
					key: '告警类型'
				},
				{
					title: '二级告警类型',
					img: 'msg/lx.png',
					key: '二级告警类型'
				},
				{
					title: '告警区域',
					img: 'msg/qy.png',
					key: '告警区域'
				},
				{
					title: '二级区域',
					img: 'msg/qy.png',
					key: '二级区域'
				},
				{
					title: '归属部门',
					img: 'msg/bm.png',
					key: '归属部门'
				},
				{
					title: '发生时间',
					img: 'msg/sj.png',
					key: '告警开始时间'
				}
			];
			if (current.value == 2) {
				data.push(
					...[{
							title: '处理人',
							img: 'msg/clr.png',
							key: '处理人'
						},
						{
							title: '处理时间',
							img: 'msg/clsj.png',
							key: '处理时间'
						}
					]
				);
				return data;
			}
			return data;
		});


	onShow(() => {
		if (current.value !== uni.$store.user.current)
			current.value = uni.$store.user.current;
	})

	/********************************************告警数据*************************************/
	const ALERT_TOP_TYPE = ref(''),
		localdata0 = ref([]),
		ALERT_TYPE = ref(''),
		localdata1 = ref([]),
		ALERT_LEVEL = ref(''),
		localdata2 = ref([]),
		ALERT_TOP_REGION = ref(''),
		localdata3 = ref([]),
		pageIndex = ref(1),
		total = ref(0),
		listData = ref([]);

	watch([ALERT_TOP_TYPE, ALERT_TYPE, ALERT_TOP_REGION, ALERT_LEVEL, current], () => {
		pageIndex.value = 1;
		listData.value = [];
		fn();
	});

	// 告警一级分类
	getApiFabric({
		apiCode: "10569110-e20b-42bb-b947-e7cfe221643f",
		params: [
			{ code: "param", value: "告警一级分类" }
		],
		propertyMapping: { text: "key", value: "value" },
	}).then(res => {
		localdata0.value = res.data
	})

	// 告警二级分类
	getApiFabric({
		apiCode: "10569110-e20b-42bb-b947-e7cfe221643f",
		params: [
			{ code: "param", value: "告警二级分类" }
		],
		propertyMapping: { text: "key", value: "value" },
	}).then(res => {
		localdata1.value = res.data
	})

	// 告警等级
	getApiFabric({
		apiCode: "10569110-e20b-42bb-b947-e7cfe221643f",
		params: [
			{ code: "param", value: "告警等级" },
		],
		propertyMapping: { text: "key", value: "value" },
	}).then(res => {
		localdata2.value = res.data
	})

	// 告警区域
	getApiFabric({
		apiCode: "10569110-e20b-42bb-b947-e7cfe221643f",
		params: [
			{ code: "param", value: "一级区域" },
		],
		propertyMapping: { text: "key", value: "value" },
	}).then(res => {
		localdata3.value = res.data
	})


	function fn() {
		loading();
		return getApiFabric({
			apiCode: "65814eff-007b-4f54-a69e-c9aa718ebc63",
			pageIndex: pageIndex.value,
			pageSize: 20,
			params: [{
					code: 'DEPT_ID',
					value: uni.getStorageSync('userInfo')?.dept?.id
				}, {
					code: 'ALERT_TOP_TYPE',
					value: ALERT_TOP_TYPE.value
				},
				{
					code: 'ALERT_TYPE',
					value: ALERT_TYPE.value
				},
				{
					code: 'ALERT_TOP_REGION',
					value: ALERT_TOP_REGION.value
				},
				{
					code: 'ALERT_LEVEL',
					value: ALERT_LEVEL.value
				},
				{
					code: 'ALERT_STATUS',
					value: ['未处理', '处理中', '已处理'][current.value]
				}
			],
			propertyMapping: {
				ids: 'ids',
				id: "id",
				二级区域: "alertRegion",
				二级告警类型: "alertType",
				告警信息: "alertMessage",
				告警区域: "alertTopRegion",
				告警开始时间: "alertStartTime",
				告警状态: "alertStatus",
				告警等级: "alertLevel",
				告警类型: "alertTopType",
				归属部门: "deptName",
				处理措施: 'measure',
				处理人: 'procesName',
				处理时间: 'procesTime',
				处理中人: 'processingName',
				处理中时间: 'processingTime',
				处理中措施: 'processingReason'
			},
			total: true
		}).then((res) => {
			listData.value.push(...res.data);
			total.value = res.total;
			closeLoading();
		});
	}

	// 滚动到底部加载数据
	function scrolltolower() {
		if (listData.value.length < total.value) {
			pageIndex.value = pageIndex.value + 1;
			fn();
		}
	}

	// 跳转详情
	function detailFn(data) {
		uni.navigateTo({
			url: '/pages/message/detail?data=' +
				JSON.stringify({
					...data,
					current: uni.$store.user.current
				})
		});
	}

	// 转隐患
	function operationFn(item) {
		uni.navigateTo({
			url: `/pages/message/operation?type=${4}&ids=${item.ids}&oldDeptName=${item.归属部门}&告警状态=${item.告警状态}`,
		})
	}
	// 初始化查询
	onShow(() => {
		fn()
	})
</script>

<style lang="scss" scoped>
	:deep() {
		.u-tabs__wrapper__nav__item {
			width: 50%;
			font-weight: 900;
		}
	}

	.u-tabs {
		background: #fff;
	}

	.item {
		margin: 0 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		+.item {
			margin-top: 20rpx;
		}

		&-p {
			margin: 8rpx 0;
		}
	}
</style>